<!--
 * @Author: ChunLai
 * @Date: 2022-08-24 09:25:19
 * @LastEditTime: 2025-09-05 08:50:36
 * @Description: 代理人类告知 -- 通用配置版
 * @FilePath: \02.bldinsure\src\views\healthy\agent\Common.vue
-->
<template>
  <div class="healthy-wrap">
    <TipMsg msg="请如实填写，以防影响正常投保！" />
    <div :class="{ disabledForm: disabledEdit }">
      <template>
        <div
          class="modules bg-fff mt10"
          v-for="(item, index) in pageData"
          :key="`modue${index}`"
        >
          <div class="flex_ac ft16 module-title">
            {{ `${item.moduleName}` }}
          </div>
          <ul class="module-ul">
            <template>
              <li
                class="module-li"
                v-for="(unit, idx) in item.questionsList"
                :key="`unit${index}-${idx}`"
                :id="`${item.type}-${idx}`"
              >
                <div
                  class="base-unit-subject"
                  :class="{ hasBtns: unit.rightBtns }"
                >
                  <div class="subject-txt">{{ unit.impartContent }}</div>
                  <div class="subject-btns" v-if="unit.rightBtns">
                    <span
                      class="btn-span"
                      :class="{ 'btn-y': unit.impartYesOrNo === 'Y' }"
                      @click="setBtnValue(index, idx, 'Y')"
                      >是</span
                    >
                    <span
                      class="btn-span"
                      :class="{ 'btn-y': unit.impartYesOrNo === 'N' }"
                      @click="setBtnValue(index, idx, 'N')"
                      >否</span
                    >
                  </div>
                </div>
                <div
                  class="base-unit-answer"
                  v-if="
                    (unit.rightBtns && unit.impartYesOrNo === 'Y') ||
                    !unit.rightBtns
                  "
                >
                  <div
                    class="answer-li"
                    v-for="(ele, j) in unit.answer"
                    :key="`${unit.impartCode}-${j}`"
                  >
                    <div class="answer-label" v-if="ele.label !== ''">
                      {{ ele.check === "1" ? "*" : "" }}{{ ele.label }}
                    </div>
                    <!-- 单选按钮 -->
                    <div
                      class="checkboxs-box"
                      v-if="ele.inputType === 'SingleCheck'"
                    >
                      <template>
                        <span
                          v-for="income in ele.checkboxs"
                          class="checkbox-span"
                          :class="{ 'bg-col': ele.value == income.value }"
                          :key="`income-${income.value}`"
                          @click="setCheckboxs(index, idx, income)"
                        >
                          {{ income.label }}
                        </span>
                      </template>
                    </div>
                    <!-- 输入框 -->
                    <div
                      class="input-box"
                      :class="{ w100: ele.label === '' }"
                      v-else
                    >
                      <input
                        class="md-input"
                        :type="ele.inputType || 'text'"
                        :placeholder="`${ele.tip || '请输入'}`"
                        v-model="ele.value"
                        @input="formatRule(ele.inputType)"
                      />
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </template>
    </div>
    <FooterBtns btnNum="1" @saveForm="nextStep" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  validateHealthRule,
  pageToApi,
  apiToPageData,
} from "@/translate/healthy/common.js";

export default {
  name: "AgentNotificationDetail",
  components: {},
  data() {
    return {
      pageData: {},
    };
  },
  computed: {
    ...mapGetters({
      tbrPrvinCapital: "insert/tbrPrvinCapital",
    }),
    isShare() {
      let res = false;
      if (this.$getDataFromUrl("share") == "1") {
        res = true;
      }
      return res;
    },
  },
  created() {
    this.initPageDatas();
  },
  methods: {
    initPageDatas() {
      // 获取健康告知相关数据
      this.$store
        .dispatch("json/getNoticeJson", "agentNotify")
        .then(async (res) => {
          let tempDatas = res.Datas;
          if (this.tbrPrvinCapital !== "500000") {
            tempDatas[0].questionsList = tempDatas[0].questionsList.filter(
              (item) => !item.areaRelatedCode
            );
          }
          this.pageData = JSON.parse(JSON.stringify(tempDatas));
          // 回显
          this.dataEcho();
        });
    },
    /* 新增方法 */
    setBtnValue(index, idx, value) {
      this.$set(
        this.pageData[index].questionsList[idx],
        "impartYesOrNo",
        value
      );
      if (value == "0") {
        this.pageData[index].questionsList[idx].answerValue = "";
        this.pageData[index].questionsList[idx].answer.forEach((ele) => {
          ele.value = "";
        });
      }
    },
    setCheckboxs(pIdx, idx, ele) {
      this.$set(
        this.pageData[pIdx].questionsList[idx].answer[0],
        "value",
        ele.value
      );
      this.$set(
        this.pageData[pIdx].questionsList[idx].answer[1],
        "value",
        ele.value === "25" ? "" : ele.label
      );
    },
    formatRule(type) {
      // this.fileInfo[type] = this.fileInfo[type].replace(/\s+/g, "");
    },
    async nextStep() {
      if (this.disabledEdit) {
        this.$backRouter();
        return;
      }
      // 告知内容校验
      let result = await this.validateBase(this.pageData);
      if (!result) {
        return false;
      }
      // 数据拼接
      let apiDatas = await pageToApi(this.pageData);
      // console.log(apiDatas);
      if (apiDatas[0].impartRemark === "25,") {
        this.$msAlert(`若关系选择其他，则关系名称取填写的内容`);
        return false;
      }
      // 特殊处理
      for (let j = 0; j < apiDatas.length; j++) {
        const item = apiDatas[j];
        if (item.impartRemark === "") {
          item.impartYesOrNo = "N,";
        }
      }
      // console.log(apiDatas);
      // 告知内容接口发送
      this.$baseConfirm("以上内容是否为代理人填写？", () => {
        this.submit(apiDatas);
      });
    },
    validateBase(healthyDatas) {
      return new Promise((resolve, reject) => {
        let resObj = {};
        for (let i = 0; i < healthyDatas.length; i++) {
          const element = healthyDatas[i];
          resObj = validateHealthRule(element);
          if (!resObj.status) {
            this.$GlobalFuns.removeToViewEle(resObj.idx);
            break;
          }
          // healthyDatas[i] = resObj.datas;
        }
        if (!resObj.status) {
          this.$baseAlert(resObj.msg, () => {
            resolve(resObj.status);
          });
        } else {
          resolve(true);
        }
      });
    },
    /* 新增方法end */
    dataEcho() {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: {
            ...this.apiComParams,
            type: "3",
          },
          apiName: "queryImparts",
        })
        .then((data) => {
          apiToPageData(this.pageData, data.imparts);
          // console.log('dataEcho', resDatas);
        });
    },
    submit(dataList) {
      // this.$store.commit("updateLoad", true);
      let params = {
        ...this.apiComParams,
        type: "3",
        imparts: dataList,
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "saveImparts",
          toast: true,
        })
        .then((res) => {
          // 设置被保人/投保人 健康告知的缓存数据
          if (this.isShare == "1") {
            this.$router.push("/shareres");
          } else {
            this.$backRouter();
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.md-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-left: 4px;
  color: #323233;
  text-align: left;
  border: 0;
}

.healthy-wrap {
  padding-bottom: 60px;
  overflow: hidden;

  .modules {
    .module-title {
      display: flex;
      padding: 10px 14px;
      background-color: #fdfbd1;
    }

    .module-ul {
      display: flex;
      flex-direction: column;
      padding: 0 14px;

      .module-li {
        padding: 10px 0;

        &:not(:last-child) {
          border-bottom: 1px solid #dedede;
        }

        .base-unit-subject {
          display: flex;
          align-items: center;

          &.hasBtns {
            justify-content: space-between;
          }

          .subject-txt {
            width: calc(100% - 80px);
            line-height: 1.5;
          }

          .subject-btns {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 70px;

            .btn-span {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 30px;
              height: 30px;
              color: #ffffff;
              border-radius: 100%;
              background-color: #c2c2c2;

              &.btn-y {
                background-color: #fb8c89;
              }
            }
          }
        }

        .base-unit-answer {
          display: flex;
          flex-direction: column;

          .answer-li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 0;

            .answer-label {
              color: #da251e;
            }

            .input-box {
              line-height: 2;
              border: 1px solid #dadada;

              &.w100 {
                width: 100%;
              }
            }

            .checkboxs-box {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              justify-content: flex-end;
              width: 70%;

              .checkbox-span {
                padding: 4px 10px;
                border: 1px solid #cccccc;
                color: #999;
                border-radius: 4px;
                line-height: 1;
                margin-bottom: 6px;

                &.bg-col {
                  border: 1px solid #fb8c89;
                  background-color: #fb8c89;
                  color: #fff;
                }

                &:not(:first-child) {
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
